<!--
 * @Author: wrngygy
 * @Date: 2025-07-01
 * @Description: 个人中心页面
-->

<template>
	<div class="profile">
		<el-row :gutter="20">
			<!-- 个人信息卡片 -->
			<el-col :xs="24" :lg="8">
				<el-card class="profile-card">
					<div class="profile-header">
						<el-avatar :size="80" :src="userInfo?.avatar">
							{{ userInfo?.nickname?.charAt(0) || 'U' }}
						</el-avatar>
						<div class="profile-info">
							<h3>{{ userInfo?.nickname || '用户' }}</h3>
							<p>{{ userInfo?.email || '未设置邮箱' }}</p>
						</div>
					</div>
					
					<el-divider />
					
					<div class="profile-stats">
						<div class="stat-item">
							<span class="stat-value">{{ userInfo?.permissions?.length || 0 }}</span>
							<span class="stat-label">权限数量</span>
						</div>
						<div class="stat-item">
							<span class="stat-value">{{ userInfo?.roles?.length || 0 }}</span>
							<span class="stat-label">角色数量</span>
						</div>
						<div class="stat-item">
							<span class="stat-value">30</span>
							<span class="stat-label">登录天数</span>
						</div>
					</div>
				</el-card>
			</el-col>

			<!-- 编辑信息 -->
			<el-col :xs="24" :lg="16">
				<el-card>
					<template #header>
						<span>个人信息</span>
					</template>

					<el-tabs v-model="activeTab" type="border-card">
						<!-- 基本信息 -->
						<el-tab-pane label="基本信息" name="basic">
							<el-form
								:model="profileForm"
								:rules="profileRules"
								ref="profileFormRef"
								label-width="100px"
							>
								<el-form-item label="用户名" prop="username">
									<el-input v-model="profileForm.username" disabled />
								</el-form-item>
								<el-form-item label="昵称" prop="nickname">
									<el-input v-model="profileForm.nickname" />
								</el-form-item>
								<el-form-item label="邮箱" prop="email">
									<el-input v-model="profileForm.email" />
								</el-form-item>
								<el-form-item label="手机号" prop="phone">
									<el-input v-model="profileForm.phone" />
								</el-form-item>
								<el-form-item label="个人简介" prop="bio">
									<el-input
										v-model="profileForm.bio"
										type="textarea"
										:rows="4"
										placeholder="请输入个人简介"
									/>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="saveProfile">
										保存信息
									</el-button>
									<el-button @click="resetProfile">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

						<!-- 修改密码 -->
						<el-tab-pane label="修改密码" name="password">
							<el-form
								:model="passwordForm"
								:rules="passwordRules"
								ref="passwordFormRef"
								label-width="100px"
							>
								<el-form-item label="当前密码" prop="oldPassword">
									<el-input
										v-model="passwordForm.oldPassword"
										type="password"
										show-password
									/>
								</el-form-item>
								<el-form-item label="新密码" prop="newPassword">
									<el-input
										v-model="passwordForm.newPassword"
										type="password"
										show-password
									/>
								</el-form-item>
								<el-form-item label="确认密码" prop="confirmPassword">
									<el-input
										v-model="passwordForm.confirmPassword"
										type="password"
										show-password
									/>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="changePassword">
										修改密码
									</el-button>
									<el-button @click="resetPassword">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

						<!-- 安全设置 -->
						<el-tab-pane label="安全设置" name="security">
							<div class="security-settings">
								<div class="security-item">
									<div class="security-info">
										<h4>两步验证</h4>
										<p>为您的账户添加额外的安全保护</p>
									</div>
									<el-switch v-model="securitySettings.twoFactorAuth" />
								</div>
								
								<el-divider />
								
								<div class="security-item">
									<div class="security-info">
										<h4>登录通知</h4>
										<p>当有新设备登录时发送邮件通知</p>
									</div>
									<el-switch v-model="securitySettings.loginNotification" />
								</div>
								
								<el-divider />
								
								<div class="security-item">
									<div class="security-info">
										<h4>账户锁定</h4>
										<p>多次登录失败后自动锁定账户</p>
									</div>
									<el-switch v-model="securitySettings.accountLock" />
								</div>
								
								<el-divider />
								
								<div class="security-actions">
									<el-button type="primary" @click="saveSecuritySettings">
										保存设置
									</el-button>
									<el-button type="danger" @click="showLogoutAllDialog">
										退出所有设备
									</el-button>
								</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useTokenStore } from '@/store'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'

const tokenStore = useTokenStore()

// 当前激活的标签页
const activeTab = ref('basic')

// 表单引用
const profileFormRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()

// 用户信息
const userInfo = computed(() => tokenStore.userInfo)

// 个人信息表单
const profileForm = reactive({
	username: '',
	nickname: '',
	email: '',
	phone: '',
	bio: ''
})

// 密码表单
const passwordForm = reactive({
	oldPassword: '',
	newPassword: '',
	confirmPassword: ''
})

// 安全设置
const securitySettings = reactive({
	twoFactorAuth: false,
	loginNotification: true,
	accountLock: true
})

// 表单验证规则
const profileRules: FormRules = {
	nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
	email: [
		{ required: true, message: '请输入邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
	],
	phone: [
		{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
	]
}

const passwordRules: FormRules = {
	oldPassword: [{ required: true, message: '请输入当前密码', trigger: 'blur' }],
	newPassword: [
		{ required: true, message: '请输入新密码', trigger: 'blur' },
		{ min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
	],
	confirmPassword: [
		{ required: true, message: '请确认新密码', trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value !== passwordForm.newPassword) {
					callback(new Error('两次输入的密码不一致'))
				} else {
					callback()
				}
			},
			trigger: 'blur'
		}
	]
}

// 保存个人信息
const saveProfile = async () => {
	if (!profileFormRef.value) return
	
	try {
		await profileFormRef.value.validate()
		
		// 更新用户信息
		if (userInfo.value) {
			tokenStore.setUserInfo({
				...userInfo.value,
				nickname: profileForm.nickname,
				email: profileForm.email,
				phone: profileForm.phone
			})
		}
		
		ElMessage.success('个人信息保存成功')
	} catch {
		ElMessage.error('请检查表单输入')
	}
}

// 重置个人信息
const resetProfile = () => {
	if (userInfo.value) {
		profileForm.username = userInfo.value.username
		profileForm.nickname = userInfo.value.nickname || ''
		profileForm.email = userInfo.value.email || ''
		profileForm.phone = userInfo.value.phone || ''
		profileForm.bio = ''
	}
}

// 修改密码
const changePassword = async () => {
	if (!passwordFormRef.value) return
	
	try {
		await passwordFormRef.value.validate()
		
		// 模拟修改密码
		ElMessage.success('密码修改成功')
		
		// 重置密码表单
		passwordForm.oldPassword = ''
		passwordForm.newPassword = ''
		passwordForm.confirmPassword = ''
	} catch {
		ElMessage.error('请检查表单输入')
	}
}

// 重置密码表单
const resetPassword = () => {
	passwordFormRef.value?.resetFields()
}

// 保存安全设置
const saveSecuritySettings = () => {
	ElMessage.success('安全设置保存成功')
}

// 退出所有设备
const showLogoutAllDialog = async () => {
	try {
		await ElMessageBox.confirm(
			'确定要退出所有设备吗？这将使您在其他设备上的登录失效。',
			'警告',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}
		)
		
		ElMessage.success('已退出所有设备')
	} catch {
		ElMessage.info('已取消操作')
	}
}

// 初始化数据
onMounted(() => {
	resetProfile()
})
</script>

<style scoped>
.profile {
	padding: 0;
}

.profile-card {
	text-align: center;
}

.profile-header {
	margin-bottom: 20px;
}

.profile-info {
	margin-top: 16px;
}

.profile-info h3 {
	margin: 0 0 8px 0;
	color: #303133;
}

.profile-info p {
	margin: 0;
	color: #909399;
	font-size: 14px;
}

.profile-stats {
	display: flex;
	justify-content: space-around;
}

.stat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.stat-value {
	font-size: 24px;
	font-weight: bold;
	color: #409eff;
	line-height: 1;
}

.stat-label {
	font-size: 12px;
	color: #909399;
	margin-top: 4px;
}

.security-settings {
	padding: 10px 0;
}

.security-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
}

.security-info h4 {
	margin: 0 0 4px 0;
	color: #303133;
	font-size: 16px;
}

.security-info p {
	margin: 0;
	color: #909399;
	font-size: 14px;
}

.security-actions {
	padding-top: 20px;
	text-align: center;
}

.security-actions .el-button {
	margin: 0 10px;
}

:deep(.el-tabs__content) {
	padding: 20px;
}
</style>
